<template>

  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="模板名称">
        <el-input v-model="form.templateName"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.desc" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createTemplateFile">创建文件模板</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <el-input  type="textarea" v-model="item.content"/>

      </el-tab-pane>
    </el-tabs>

  </div>


</template>

<script>
  export default {
    name: "AddPageTemplate",
    data() {
      return {
        form: {
          templateName: '',
          desc: ''
        },
        templateFileName: '',
        editableTabsValue: '',
        editableTabs: [],
        tabIndex: 0
      }
    },
    methods: {
      createTemplateFile() {
        this.$prompt('请先想个文件名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          this.templateFileName = value;
          this.addTab(this.templateFileName);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      addTab(targetName) {
        let newTabName = this.templateFileName;
        this.editableTabs.push({
          title: newTabName,
          name: newTabName,
          content: '这里改成富文本'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
</script>

<style scoped>

</style>
